<template>
  <view class="content">
    <!-- 启动图 -->
    <view class="two" v-if="launchType == 1">
      <swiper class="swiper" @change="changeSwiper">
        <swiper-item v-for="(item, index) in imgList" :key="index">
          <view class="swiper_one" v-if="index == imgList.length - 1" @tap="goPath()" @touchstart="itemTouchstart" @touchmove="itemTouchmove">
            <image :src="item.thumb | assembleImgSrc" mode="aspectFill"></image>
            <view class="swiper_end_btn" v-if="false"><button type="primary" plain="true" @tap="goPath()">{{i18n['即刻体验']}}</button></view>
          </view>
          <view class="swiper_one" v-else><image :src="item.thumb | assembleImgSrc" mode="aspectFill"></image></view>
        </swiper-item>
      </swiper>
      <!-- 轮播指示点样式修改 -->
      <view class="dots">
        <block v-for="(item, index) in imgList.length" :key="item"><view class="dot" :class="index == swiperCurrent ? ' active' : ''"></view></block>
      </view>
    </view>
    <!-- 引导视频 -->
    <video
      v-if="launchType == 2"
      class="ad_video"
      :src="video"
      :autoplay="true"
      :muted="isSound"
      :loop="false"
      :direction="0"
      :controls="false"
      :show-center-play-btn="false"
      :enable-progress-gesture="false"
      :vslide-gesture-in-fullscreen="false"
      @error="playError"
      @play="playStart"
      @ended="ended"
      object-fit="cover"
    >
      <cover-view @click="goPath" class="cu-btn round cover-text jump">{{i18n['关闭']}}</cover-view>
      <cover-image class="cover-image-sound" :src="imgWechatUrl+'/index/off.png'" @click="offSound" v-if="isSound"></cover-image>
      <cover-image class="cover-image-sound" :src="imgWechatUrl+'/index/on.png'" @click="onSound" v-if="!isSound"></cover-image>
    </video>
    <!-- 断网检测 -->
    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
let isLogin;
export default {
  data() {
    return {
			imgWechatUrl: this.imgWechatUrl,
      isSound: true,
      launchType: 1, // 类型，控制显示哪一种
      video: '',
      imgList: [], //引导页列表
      touches: {
        startX: '',
        startY: '',
        moveEndX: '',
        moveEndY: ''
      },
      swiperCurrent: 0,
      dotsStyles: {
        bottom: -20,
        backgroundColor: 'rgba(230, 0, 54, 0.3)',
        selectedBackgroundColor: '#FE510D'
      },
    };
  },
  beforeCreate() {
    isLogin = uni.getStorageSync('LOGIN_TOKEN');
    if (isLogin) uni.reLaunch({ url: '/pages/tab/home/shopindex/index' });
  },
  onLoad() {
    if (isLogin) return;
    this.$api.post(global.apiUrls.postOperationGetAds, { typeid: 5 }).then(res => {
      if (res.data.code == 1) {
        // 判断视频或者图片引导页
        console.log('引导页数据', res.data.data);
        // 空数据，不显示，隐藏引导页功能
        if (res.data.data.length == 0) this.goPath();
        let flag = false;
        let newSwiperArr = [];
        res.data.data.forEach((item, index) => {
          if (item.type == 2) {
            this.video = item.video;
            this.launchType = 2;
            flag = true;
          }
          if (item.type == 1) {
            newSwiperArr.push(item);
          }
        });
        // 判断视频不存在，展示图片引导页
        if (!flag) {
          this.launchType = 1;
          this.imgList = newSwiperArr;
        }
      }
    });
  },
  methods: {
    // 视频播放结束
    ended() {
      console.log('页面跳转');
      this.goPath();
    },
    // 播放失败
    playError(e) {
      console.log('播放失败', e);
    },
    // 开始播放
    playStart(e) {
      console.log('开始播放');
    },
    // 声音操作
    onSound() {
      this.isSound = true;
      console.log(this.isSound);
    },
    offSound() {
      this.isSound = false;
      console.log(this.isSound);
    },
    // 切换轮播图
    changeSwiper(e) {
      this.swiperCurrent = e.detail.current;
    },
    itemTouchstart(e) {
      e.preventDefault();
      (this.touches.startX = e.changedTouches[0].pageX), (this.touches.startY = e.changedTouches[0].pageY);
    },
    itemTouchmove(e) {
      e.preventDefault();
      this.touches.moveEndX = e.changedTouches[0].pageX;
      this.touches.moveEndY = e.changedTouches[0].pageY;
      let X = this.touches.moveEndX - this.touches.startX;
      let Y = this.touches.moveEndY - this.touches.startY;
      // 滑动 去首页
      if (Math.abs(X) > 100 && X < 0 && Y > 0) {
        uni.setStorageSync('AD_INFO', true);
        uni.setStorageSync('LOGIN_TOKEN', true);
        uni.switchTab({
          url: '/pages/tab/home/shopindex/index'
        });
      }
    },
    //跳过
    goPath() {
      uni.setStorageSync('AD_INFO', true);
      uni.setStorageSync('LOGIN_TOKEN', true);
      uni.switchTab({ url: '/pages/tab/home/shopindex/index' });
    },
  }
};
</script>

<style lang="scss">
page {
  background: #fff;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.content {
  position: fixed;
  width: 100%;
  height: 100%;
  .one {
    height: 100%;
    image {
      display: block;
      width: 100%;
      height: 100%;
    }
    .countdown {
      position: absolute;
      right: 20upx;
      // top: calc(15upx + var(--status-bar-height));
      padding: 10upx 20upx;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      border-radius: 30upx;
    }
  }
  .two {
    position: relative;
    .swiper {
      width: 750upx;
      height: 100vh;
      swiper-item {
        height: 100vh;
        width: 750upx;
        .swiper_one {
          image {
            height: 100vh;
            width: 750upx;
          }
          view {
            position: absolute;
            left: 50%;
            bottom: 150upx;
            transform: translateX(-50%);
            padding: 20upx 60upx;
            background: rgba(0, 0, 0, 0.3);
            color: #fff;
            border-radius: 40upx;
            background: $bgtheme;
          }
          .swiper_end_btn {
            background: rgba(0, 0, 0, 0);
            bottom: 100rpx;
            button {
              border-radius: 40rpx;
              /* padding:0 30rpx ; */
              width: 400rpx;
              height: 90rpx;
              line-height: 90rpx;
              background-color: rgba(255, 255, 2555, 1);
            }
          }
        }
      }
    }
    .dots {
      position: absolute;
      bottom: 84upx;
      left: 50%;
      /*  这里一定要注意兼容不然很可能踩坑 */
      transform: translate(-50%, 0);
      -webkit-transform: translate(-50%, 0);
      z-index: 99;
      display: flex;
      flex-direction: row;
      justify-content: center;

      .dot {
        width: 10rpx;
        height: 10rpx;
        border-radius: 50%;
        transition: all 0.6s;
        background: #ccc;
        margin-right: 15rpx;
        border-radius: 3px;
      }

      .active {
        width: 24rpx;
        height: 8rpx;
        background: $fu-main-color;
      }
    }
  }
}

.ad_video {
  position: absolute;
  width: 100%;
  height: 100vh;
}

.jump {
  position: absolute;
  z-index: 99;
  top: 60rpx;
  right: 40rpx;
}

.cover-image-sound {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  z-index: 99;
  top: 60rpx;
  left: 40rpx;
}

/* #ifdef APP-PLUS */
.jump {
  top: 120rpx;
}

.cover-image-sound {
  top: 120rpx;
}

.cover-text {
  width: 200rpx;
  height: 50rpx;
  text-align: center;
  line-height: 45rpx;
}

/* #endif */
</style>
